<template>
	<view>
		<pageHeader  @back='back'  :fixed='true' :border='true'>
			<text>举报</text>
		</pageHeader>
		<view class="title">
			<text>请选择举报原因</text>
		</view>
		<view class="bodys">
			<view class="body" v-for="(item,index) in reasonList" :key='index'>
				<text>{{item.content}}</text>
				<view @tap="toChoose" :data-index='index'>
					<image src="/static/svg/gou.svg" v-if="item.choose"></image>
				</view>
			</view>
		</view>
		<view class="addImg">
			<text class="addImg_tip">图片上传（仅限3张）</text>
			<view class="img">
				<imgDele :src="item" mode="aspectFill" @imgTap='imgTap' :index='index' @deleSuccess='deleSuccess' @stopMove='stopMovingImg' @startMove='startMoveImg' v-for="(item,index) in imgPathList"></imgDele>
				<view @tap="chooseImg" v-if="imgPathList.length<3">
					<image src="/static/svg/tianjia.svg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="textarea">
			<textarea placeholder="补充说明（可选）" placeholder-class="textareaPlaceholder" :maxlength='200' v-model="supplement"/>
			<text>{{supplement.length}}/200</text>
		</view>
		<view class="button" :style="{opacity:showButton?1:0,backgroundColor:canDo?'':'#C8C8C8'}" @tap="toSubmit">
			<text>提交</text>
		</view>
		<picturePreview :list='imgPathList' :index='imgIndex' v-if='showPreview'  @confirm='deleSuccess' @cancel='cancelPreview'/>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import pageHeader from "@/components/header/header.vue"
	import imgDele from "@/components/dele/imgDele.vue"
	import picturePreview from "@/components/picturePreview/picturePreview.vue"
	export default {
		components: {pageHeader,imgDele,picturePreview},
		data() {
			return {
				imgPathList:[],
				showPreview:false,
				imgIndex:0,
				showButton:true,
				supplement:"",
				canDo:false,
				reasonList:[],
				commentId:""
			};
		},
		onLoad(e) {
			this.commentId=e.id
			this.getReason()
		},
		methods: {
			async getReason(){
				let res=await urls.reportType()
				this.reasonList=res.data
				for(let a=0;a<this.reasonList.length;a++){
					this.reasonList[a].choose=false
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async uploads(list){ 
			    const that=this     
			    let arr=[]
			    for (let k in list) {
			        arr[k]=await that.up_img(list[k])
			    } 
			    return arr;
			},
			up_img(url){ 
			    return new Promise((resolve, reject) => {  
			        uni.uploadFile({
			            url: 'http://classic.wljiam.com/caapi/card/insertreminder',
			            filePath: url,
			            name: 'file',
			            formData: {
			                'userId': localStorage.getItem("userId")
			            },
						success: (uploadFileRes) => { 
			                resolve(uploadFileRes.data);  
						}
					});
			    })  
			},
			chooseImg() {
				let count=3-this.imgPathList.length
				uni.chooseImage({
				    count: count, 
				    sizeType: ['compressed', 'original'],
				    sourceType: ['album', 'camera'],
				    success:async res=> {
						if(res.tempFilePaths.length>3||res.tempFilePaths.length+this.imgPathList.length>3||this.imgPathList.length+1>3){
							uni.showToast({
							    title: '最多上传3张图片',
								icon:'none',
							    duration: 1500
							})
							return
						}
						let arr=await this.uploads(res.tempFilePaths)	
						let tempFilePaths=[]
						for (let k in arr) {
							if(JSON.parse(arr[k]).code==0){
								 tempFilePaths[k]=JSON.parse(arr[k]).data
							}
						}
				        this.imgPathList.push(...tempFilePaths)
				    }
				})
			},
			imgTap(index){
				this.imgIndex=index
				this.showPreview=true
			},
			cancelPreview(){
				this.showPreview=false
			},
			startMoveImg(){
				this.showButton=false
			},
			stopMovingImg(){
				setTimeout(()=>{
					this.showButton=true
				},225)
			},
			deleSuccess(e){
				this.imgPathList.splice(e,1)
				this.showButton=true
				// if(this.imgPathList.length<3){
				// 	this.canDo=false
				// }
			},
			toChoose(e){
				this.reasonList[e.currentTarget.dataset.index].choose=!this.reasonList[e.currentTarget.dataset.index].choose
				let have=false
				for(let a=0;a<this.reasonList.length;a++){
					if(this.reasonList[a].choose){
						have=true
						break
					}
				}
				this.canDo=have
				this.$forceUpdate()
			},
			async toSubmit(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				if(!this.canDo){
					return
				}
				let chooseList=[]
				for(let a=0;a<this.reasonList.length;a++){
					if(this.reasonList[a].choose){
						chooseList.push(this.reasonList[a].id)
					}
				}
				let data={}
				data.content=this.supplement
				data.photo=this.imgPathList.join(",")
				data.typeId=chooseList.join(",")
				data.userId=localStorage.getItem("userId")
				data.commentId=this.commentId
				let res=await urls.addReport(data)
				if(res.code==0){
					uni.showToast({
					    title: '您的举报以提交，平台将进行核实，情况属实，将给予相应处理！',
						icon :'none',
					    duration: 2000
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},2000)
				}
			}
		},
	}
</script>

<style lang="scss">
.top_padding{
	height: 1rpx;
	background-color: #EEEEEE;
	position: fixed;
	width: 750rpx;
	top: 85rpx;
	z-index: 999;
}
.title{
	height:103rpx ;
	border-bottom: 1rpx solid #EEEEEE;
	padding-left:30rpx;
	display: flex;
	align-items: center;
	padding-top: 13rpx;
	text{
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color:#999999 ;
		line-height: 30rpx;
	}
}
.bodys{
	padding-left: 30rpx;
	.body{
		height: 95rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 60rpx ;
		text{
			font-size: 30rpx;
			letter-spacing: 1rpx;
			color: #333333;
		}
		view{
			height: 30rpx;
			width: 30rpx;
			border-radius: 3rpx;
			border: 1rpx solid #C0C0C0;
			position: relative;
			image{
				height: 24rpx;
				width: 32rpx;
				position: absolute;
				z-index: 2;
				top: 2rpx;
				left: 2rpx;
			}
		}
	}
}
.addImg{
	margin-top: 32rpx;
	.addImg_tip{
		font-size: 26rpx;
		color:#999999 ;
		letter-spacing: 1rpx;
		line-height: 26rpx;
		margin-left: 39rpx;
	}
	.img{
		display: flex;
		margin-top:20rpx ;
		view{
			height: 210rpx;
			width: 210rpx;
			margin-left: 30rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
}
.textarea{
	height:250rpx ;
	width: 690rpx;
	margin: 40rpx auto 0;
	position: relative;
	padding: 20rpx;
	padding-bottom: 50rpx;
	border: 1rpx solid #E7E7E7;
	border-radius: 3rpx;
	textarea{
		height: 100%;
		width: 100%;
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #666666;
		text-align: justify;
	}
	.textareaPlaceholder{
		color:#CECECE ;
	}
	text{
		font-size:24rpx ;
		color: #999999;
		letter-spacing: 1rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}
}
.button{
	height: 90rpx;
	width: 590rpx;
	background-color:#C84739 ;
	border-radius: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 60rpx auto 75rpx;
	text{
		font-size:34rpx ;
		color:#FFFAEB ;
		letter-spacing: 1rpx;
	}
}
</style>
